<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
  {{names[0]}}   使用索引获取数组中的值 前提是要知道数组中数据的个数
  v-for 指令  实现数据的遍历
-->

<div id="app">
    <h1>info:{{info}}</h1>
    <h1>age = {{age}}</h1>
    <h1>数组类型值的遍历</h1>
    <ul>
        <li v-for="(name,index) in names">{{name}}--{{index}}</li>
    </ul>

    <h1>遍历对象</h1>
    <ul>
        <li v-for="(val,key) in user"> {{key}}::{{val}}</li>
    </ul>

    <table border="1px" width="100%" cellspacing="0">
        <tr>
            <th>用户名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="user in users">
            <td v-for="val in user">{{val}}</td>
        </tr>
    </table>


    <hr>


    <form>
        <p><input type="text" name="username" placeholder="请输入用户名"   v-model="usr.username"></p>
        <p><input type="text" name="password" placeholder="请输入密码"    v-model="usr.password" ></p>
        <p><input type="button" value="立即登录"></p>
    </form>


</div>

<script type="text/javascript">

    const vm = new Vue({
        el:'#app',
        data:{
            info:'v-for的基本使用',
            age:20,
            names:["tom","xiaoming","tom","xiaoming","tom","xiaoming"],
            uname:"",
            pwd:"",  //  {uname,pwd}  -> JSON.stringify()
            user:{
                username:'tom',
                password:'123456',
                age:20,
                sex:'男'
            },
            usr:{
                username:'xiaoming',
                password:'123456',
            },
            users:[
                {
                    username:'tom',
                    age:20,
                    sex:'男'
                },
                {
                    username:'tom',
                    age:20,
                    sex:'男'
                },
                {
                    username:'tom',
                    age:20,
                    sex:'男'
                },
                {
                    username:'tom',
                    age:20,
                    sex:'男'
                }
            ]
        },
        methods:{}
    })

</script>
</body>
</html>
